<!-- 报到人工审核 -->
<template>
    <div>
        <condition-card @reset="reset" @search="onSubmit" label-position="right">
            <el-row :gutter="24">
                <el-col :span="8">
                    <el-form-item label="年级">
                        <GradeSelect v-model="queryItem.year" style="width: 80%;"></GradeSelect>
                        <!-- <el-select v-model="queryItem.year">
                <el-option v-for="item in options.grade"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                </el-option>
                        </el-select>-->
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="培养层次">
                        <el-select v-model="queryItem.trainingLevel" style="width: 80%;">
                            <el-option
                                v-for="item in options.trainingLevel"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item :label="$t('label.college')">
                        <DictSelect
                            v-model="queryItem.departmentName"
                            :data="options.faculty"
                            @change="changeFaculty"
                            style="width: 80%;"
                        ></DictSelect>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="8">
                    <el-form-item :label="$t('label.major')">
                        <!--监听queryForm.faculty,发生变化后台自动查询且绑定专业-->
                        <DictSelect
                            :faculty="queryItem.departmentName"
                            v-model="queryItem.professionName"
                            :data="options.profession"
                            style="width: 80%;"
                        ></DictSelect>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="完成情况">
                        <el-select v-model="queryItem.status" style="width: 80%;">
                            <el-option
                                v-for="item in options.isTaskDone"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </condition-card>
        <el-card>
            <el-row :gutter="0">
                <el-col>
                    <p class="section-title">新生列表</p>
                </el-col>
            </el-row>
            <el-row :gutter="0" class="bg-white pd-20px">
                <el-col>
                    <!-- border-bottom: 1px solid #d2d4d6; -->
                    <el-row :gutter="0" style="height: 50px;">
                        <el-col :span="4">
                            <!--<el-input type="text" v-model="queryItem.condition"-->
                            <!--placeholder="学号、姓名">-->
                            <!--<i class="el-icon-search" slot="suffix"-->
                            <!--style="margin-top:7px;cursor: pointer;" @click="filter">-->
                            <!--</i>-->
                            <!--</el-input>-->
                            <el-input
                                v-model="queryItem.condition"
                                placeholder="按姓名搜索"
                                @change="handSearchChang"
                                prefix-icon="el-icon-search"
                            ></el-input>
                        </el-col>
                        <el-col :span="10">
                            <div class="empty-box"></div>
                        </el-col>
                        <el-col :span="10">
                            <div class="float-right">
                                <el-button @click="exportToExcel">导出</el-button>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row :gutter="0" class="no-margin">
                        <el-col>
                            <el-table :data="students" size="mini" tooltip-effect="light">
                                <edu-table-column type="expand">
                                    <template slot-scope="props">
                                        <el-form
                                            label-position="right"
                                            inline
                                            class="demo-table-expand"
                                            label-width="100px"
                                        >
                                            <el-row :gutter="20">
                                                <el-col :span="8">
                                                    <el-form-item label="学号:">
                                                        <span>{{ props.row.studentId }}</span>
                                                    </el-form-item>
                                                </el-col>
                                                <el-col :span="8">
                                                    <el-form-item label="姓名:">
                                                        <span>{{ props.row.name }}</span>
                                                    </el-form-item>
                                                </el-col>
                                                <el-col :span="8">
                                                    <el-form-item label="身份证号:">
                                                        <span>{{ props.row.card }}</span>
                                                    </el-form-item>
                                                </el-col>
                                                <el-col :span="8">
                                                    <el-form-item label="联系方式:">
                                                        <span>{{ props.row.phoneNumber }}</span>
                                                    </el-form-item>
                                                </el-col>
                                                <el-col :span="8">
                                                    <el-form-item label="年级:">
                                                        <span>{{ props.row.year }}</span>
                                                    </el-form-item>
                                                </el-col>
                                                <el-col :span="8">
                                                    <el-form-item label="培养层次:">
                                                        <span>{{ props.row.trainingLevel }}</span>
                                                    </el-form-item>
                                                </el-col>
                                                <el-col :span="8">
                                                    <el-form-item label="学院:">
                                                        <span>{{ props.row.departmentName }}</span>
                                                    </el-form-item>
                                                </el-col>
                                                <el-col :span="8">
                                                    <el-form-item label="专业:">
                                                        <span>{{ props.row.professionName }}</span>
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>
                                            <el-row :gutter="20">
                                                <el-col :span="8">
                                                    <el-form-item label="电子邮箱:">
                                                        <span>{{ props.row.eMail }}</span>
                                                    </el-form-item>
                                                </el-col>
                                                <el-col :span="8">
                                                    <el-form-item label="紧急联系人:">
                                                        <span>{{ props.row.emergencyContact }}</span>
                                                    </el-form-item>
                                                </el-col>
                                                <el-col :span="8">
                                                    <el-form-item label="紧急联系方式:">
                                                        <span>{{ props.row.emergencyPhone }}</span>
                                                    </el-form-item>
                                                </el-col>
                                                <el-col :span="8">
                                                    <el-form-item label="联系地址:">
                                                        <span>{{ props.row.contactAddress }}</span>
                                                    </el-form-item>
                                                </el-col>
                                            </el-row>
                                        </el-form>
                                    </template>
                                </edu-table-column>
                                <edu-table-column label="学号">
                                    <template slot-scope="scope">{{scope.row.studentId}}</template>
                                </edu-table-column>
                                <edu-table-column label="姓名">
                                    <template slot-scope="scope">{{scope.row.name}}</template>
                                </edu-table-column>
                                <edu-table-column label="学院">
                                    <template slot-scope="scope">{{scope.row.departmentName}}</template>
                                </edu-table-column>
                                <edu-table-column label="专业">
                                    <template slot-scope="scope">{{scope.row.professionName}}</template>
                                </edu-table-column>
                                <edu-table-column label="学生类型">
                                    <template slot-scope="scope">{{scope.row.trainingLevel}}</template>
                                </edu-table-column>
                                <edu-table-column prop="status" label="任务完成情况">
                                    <template slot-scope="scope">
                                        <el-button
                                            type="text"
                                            @click="showDialog(scope.row)"
                                        >{{scope.row.status | completeStatus}}</el-button>
                                    </template>
                                </edu-table-column>
                                <edu-table-column label="联系电话">
                                    <template slot-scope="scope">{{scope.row.phoneNumber}}</template>
                                </edu-table-column>
                                <edu-table-column label="家庭地址" show-overflow-tooltip>
                                    <template slot-scope="scope">{{scope.row.contactAddress}}</template>
                                </edu-table-column>
                            </el-table>
                        </el-col>
                    </el-row>
                    <el-row :gutter="0">
                        <el-col>
                            <div class="edu-pagination">
                                <div class="float-left">
                                    <!-- <span class="edu-total">Total: {{ queryItem.total }}</span> -->
                                </div>
                                <el-pagination
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="queryItem.pageNum"
                                    :page-sizes="[20, 50, 100,500,1000]"
                                    :page-size="queryItem.pageSize"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="queryItem.total"
                                    style="float: right;margin:10px 0 0 0;"
                                ></el-pagination>
                            </div>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
            <el-dialog title="任务完成情况" :visible.sync="isDialogShow" width="40%">
                <div>
                    <ul v-if="taskList.length !== 0" class="item-list">
                        <li v-for="(task,index) in taskList" :key="index">
                            <i v-if="task.status === 2" class="el-icon-success color-success"></i>
                            <i v-else class="el-icon-error color-error"></i>
                            <span>{{task.templateName}}</span>
                        </li>
                    </ul>
                    <ul v-else class="item-list">
                        <li>
                            <span>暂无任务</span>
                        </li>
                    </ul>
                </div>
                <span slot="footer">
                    <el-button @click="isDialogShow = false">确 定</el-button>
                </span>
            </el-dialog>
        </el-card>
    </div>
</template>
<script>
import {
    getPageTaskInfoByStudent,
    getAllStudentTaskStatus,
    exportStudentForTask
} from 'common/src/api/welcomeService/taskTemplate'
import { requireTaskByStudent } from 'common/src/api/welcomeService/taskTemplate'
import { queryDic } from 'common/src/api/dictionary'
import UTILS from 'common/src/utils/utils'
import examinationStudentsApi from 'common/src/api/welcomeService/examinationStudents'
import filters from 'common/src/filters'

export default {
    name: 'TaskStatistic',
    data() {
        const getGrade = (function() {
            let now = new Date().getFullYear()
            let years = []
            for (let i = 0; i < 6; i++) {
                years.push({
                    label: now - i,
                    value: now - i
                })
            }
            return years
        })()
        return {
            api: examinationStudentsApi,
            isDialogShow: false,
            taskList: [],
            queryItem: {
                year: '',
                isStudentAbroad: '',
                trainingLevel: '',
                departmentName: '',
                professionName: '',
                status: '',
                pageNum_: 1,
                total: 0,
                pageSize_: 20
            },
            options: {
                trainingLevel: [],
                grade: getGrade,
                faculty: [],
                profession: [],
                academicYear: [
                    {
                        label: '2018级',
                        value: '2018'
                    },
                    {
                        label: '2017级',
                        value: '2017'
                    }
                ],
                college: [
                    {
                        label: '计算机学院',
                        value: '计算机学院'
                    },
                    {
                        label: '土木工程学院',
                        value: '土木工程学院'
                    }
                ],
                studentType: [
                    {
                        label: '研究生',
                        value: '研究生'
                    },
                    {
                        label: '博士',
                        value: '博士'
                    }
                ],
                isTaskDone: [
                    {
                        label: '全部',
                        value: '3'
                    },
                    {
                        label: '未完成',
                        value: '0'
                    },
                    {
                        label: '已完成',
                        value: '2'
                    }
                ],
                speciality: [
                    {
                        label: '计算机文化',
                        value: '计算机文化'
                    },
                    {
                        label: '桥梁工程专业',
                        value: '桥梁工程专业'
                    }
                ],
                taskStutas: [
                    {
                        label: '已失效',
                        value: 'disabled'
                    }
                ]
            },
            students: []
        }
    },
    methods: {
        exportToExcel() {
            let loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(255, 255, 255, .48)'
            })
            let params = {
                year: this.queryItem.year,
                isStudentAbroad: this.queryItem.isStudentAbroad,
                trainingLevel: this.queryItem.trainingLevel,
                departmentName: this.queryItem.departmentName,
                professionName: this.queryItem.professionName,
                status: this.queryItem.status,
                'x-token':
                    this.$store.state.session.sessionid || localStorage.getItem('sessionid') || ''
            }
            exportStudentForTask(params).then(res => {
                if (res.code == 200) {
                    this.delayRequest(res.data.key, loading)
                } else {
                    loading.close()
                }
            })
        },
        //   exportList() {
        //   let loading = this.$loading({
        //     lock: true,
        //     text: "Loading",
        //     spinner: "el-icon-loading",
        //     background: "rgba(255, 255, 255, .48)"
        //   });
        //   let data = _.cloneDeep(this.queryForm);
        //   data.ids = this.chooseLists.map(c => c.id);
        //   examinationStudentsApi.exportList(data).then(res => {
        //     if (res.code == 200) {
        //       this.delayRequest(res.data.key, loading);
        //     } else {
        //       loading.close();
        //     }
        //   });
        // },
        async delayRequest(key, loading) {
            await new Promise(resolve => setTimeout(resolve, 5000))
            examinationStudentsApi
                .getReportStatus(key)
                .then(res => {
                    if (res.code == 200 && res.data.status) {
                        let path = this.api.exportUrl + res.data.path
                        //window.open(path);
                        window.location.href = path
                        loading.close()
                    } else {
                        this.delayRequest(key, loading)
                    }
                })
                .catch(ex => {
                    this.delayRequest(key, loading)
                })
        },
        review() {},
        reset() {
            this.queryItem.pageNum_ = 1
            this.queryItem.year = ''
            this.queryItem.isStudentAbroad = ''
            this.queryItem.trainingLevel = ''
            this.queryItem.departmentName = ''
            this.queryItem.professionName = ''
            this.queryItem.status = ''
            this.queryItem.condition = ''
            this.initPage(this.queryItem)
        },
        onSubmit() {
            this.queryItem.pageNum_ = 1
            this.initPage(this.queryItem)
        },
        handleCurrentChange(pageNum) {
            this.queryItem.pageNum_ = pageNum
            this.initPage(this.queryItem)
        },
        handleSizeChange(pageSize) {
            this.queryItem.pageSize_ = pageSize
            this.queryItem.pageNum_ = 1
            this.initPage(this.queryItem)
        },
        handSearchChang(condition) {
            //this.queryItem.departmentName = string;
            this.initPage(this.queryItem)
        },
        filter() {},
        goChart() {
            this.$router.push('/taskChart')
        },
        showDialog(row) {
            this.isDialogShow = true
            let query = {
                studentId: row.studentId,
                isStudentAbroad: row.isStudentAbroad,
                trainingLevel: row.trainingLevel
            }
            requireTaskByStudent(query).then(res => {
                this.taskList = res.data
            })
        },
        initPage(options = {}) {
            let query = _.omit(options, ['total'])
            getAllStudentTaskStatus(query)
                .then(res => {
                    if (res.data && res.data.list) {
                        this.queryItem.total = res.data.total
                        this.queryItem.pageNum = res.data.pageNum
                        this.queryItem.pageSize = res.data.pageSize
                        this.students = res.data.list
                    }
                })
                .catch(function(error) {
                    console.log('error: ' + error)
                })
        },
        initOptions() {
            let data = {
                lang: this.$store.getters.language || 'cn',
                type: 'allChild',
                keys: ['X_PYCC', 'X_YX', 'G_ZY']
            }
            queryDic(data)
                .then(res => {
                    console.log(res)
                    if (res.code == 200) {
                        this.fillSelect(res.data)
                        this.onSubmit()
                    }
                })
                .catch(error => {
                    console.log(error)
                    this.onSubmit()
                })
        },
        fillSelect(data) {
            this._fill('trainingLevel', data.X_PYCC)
            this._fill('faculty', data.X_YX)
            // this._fill("professionName", data.G_ZY);
        },
        _fill(type, data) {
            for (let key in data) {
                this.options[type].push({
                    value: key,
                    label: data[key]
                })
            }
        },
        //学院改变获取专业
        changeFaculty(val) {
            this.options.profession = []
            this.queryItem.professionName = ''
            let facultys
            facultys = this.queryItem.departmentName ? [this.queryItem.departmentName] : []
            let data = {
                lang: this.$store.getters.language || 'cn',
                type: 'allChild',
                keys: ['G_ZY'],
                filter: {
                    prefix: facultys,
                    specilaCode: 'XY2ZY',
                    facultys: facultys,
                    grade: this.queryItem.year
                }
            }
            queryDic(data)
                .then(res => {
                    if (res.code == 200)
                        UTILS.fillSelect(
                            {
                                profession: 'G_ZY'
                            },
                            res.data,
                            this.options
                        )
                })
                .catch(error => {
                    console.log(error)
                })
        }
    },
    filters: {
        completeStatus(val) {
            return filters.completeStatus(val)
        }
    },
    mounted() {
        this.initOptions()
        this.initPage(this.queryItem)
    }
}
</script>
<style lang="scss" scoped>
.item-list {
    list-style-type: none;
    li {
        line-height: 24px;
    }
}

.el-dialog__body {
    padding: 0;
}
</style>
